<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="name" width="180" />
            <el-table-column prop="age" label="age" width="180" />
            <el-table-column prop="height" label="height" />
            <el-table-column prop="操作" label="操作" >
                <template #default="scope">
                    <el-button type='text'  @click="changeData(scope.row)">
                        编辑
                    </el-button>
                    <el-button type='text'  @click="deleteData(scope.$index)">
                        删除
                    </el-button>
                </template>
             </el-table-column>
        </el-table>
        {{form.title}}
        <el-input v-model="form.title">

        </el-input>
    <el-dialog v-model="dialogFormVisible" :title="form.id ?'编辑':'添加'" :append-to-body='true' :show-close='false' width='500px' @close="close">
        <el-form :model="form" ref="form"  label-width="100px" >
            <el-form-item label="名字" >
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.age" />
            </el-form-item>
             <el-form-item label="身高">
              <el-input v-model="form.height" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">
                  确定
                </el-button>
         </span>
    </template>
  </el-dialog>  
  <el-button type="danger" plain @click="clear">清除</el-button>
   <el-button @click="addData" type="primary">添加</el-button>
    <el-button @click="changeLaData" type="primary">缓存</el-button>
    </div>
</template>
<script>
import {ref,reactive, onMounted, toRefs} from 'vue'
export default {
    setup() {

        // toRef
        onMounted(()=>{
            console.log('我是安装后的阶段')
        }) 
        let  tableData = reactive([{
                name:'ljl',
                age:23,
                height:1.70,
                id:1
        },
        {
               name:'黑旋风',
                age:27,
                height:1.90,
                 id:2
        },
            {
               name:'无影手',
                age:25,
                height:1.80,
                id:3
        },
            {
               name:'小黑子 ikun',
                age:17,
                height:1.65,
                 id:4
        }
        ])
        let dataObj = reactive({
            form:{
                name:'',
                age:'',
                title:'2312'
            },
            
        })
        let dialogFormVisible = ref(false)
        let changeData = (data)=>{
            // dataObj.form = data
            Object.assign(dataObj.form,data)
            console.log(dataObj.form)
            dialogFormVisible.value = true
        }
        let clear = ()=>{
            tableData.length =0
        }
        let addData = ()=>{
            tableData[0] ={
               name:'小黑子 ikun',
                age:17,
                height:1.65,
                 id:4
        }
            dialogFormVisible.value = true
        }
        function changeLaData () {
            let num  = Math.floor(Math.random() * 10)
            sessionStorage.setItem('my',num)
            console.log(sessionStorage.getItem('my'))
        }
        let deleteData = (i)=>{
            tableData.splice(i,1)
        }
        let submit=()=>{
           const id =  dataObj.form.id
            let dataIndex =  tableData.findIndex(item=>item.id===id)
            if(dataIndex!== -1){
                tableData.splice(dataIndex,1,dataObj.form)
            }else{
                 tableData.push({...dataObj.form,id:tableData.length+1})
            }
             dataObj.form = {}
             dialogFormVisible.value = false
        }
        let close=()=>{
            dataObj.form = {}
        }
        return {
            tableData,
            dialogFormVisible,
            changeData,
            ...toRefs(dataObj),
            clear,
            addData,
            deleteData,
            submit,
            changeLaData,
            close
        }
    },
}
</script>
